<template>
  <view>
    <page-head :title="title" />

    <view class="uni-padding-wrap uni-common-mt">
      <!-- 1. 主操作 loading -->
      <button type="primary" :loading="loading" @click="toggleLoading">
        页面主操作 Loading
      </button>

      <!-- 2. 次要操作 disabled -->
      <button type="default" disabled="true">
        页面次要操作 Disabled
      </button>

      <!-- 3. 警告类 normal -->
      <button type="warn" @click="goto">警告类操作 Normal</button>

      <!-- 4. 镂空按钮 -->
      <view class="button-sp-area">
        <button type="primary" plain="true">镂空按钮</button>
        <button type="default" plain="true">镂空按钮</button>
        <button type="warn" plain="true">镂空按钮</button>

        <!-- 5. 不可点击镂空 -->
        <button type="default" disabled="true" plain="true">
          不可点击的按钮
        </button>
      </view>

      <!-- 6. mini 尺寸 -->
      <view class="mini-area">
        <button class="mini-btn" type="primary" size="mini">按钮</button>
        <button class="mini-btn" type="default" size="mini">按钮</button>
        <button class="mini-btn" type="warn" size="mini">按钮</button>
      </view>

      <!-- 7. open-type 能力 -->
      <!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS -->
      <button open-type="launchApp" app-parameter="uni-app" @error="launchAppError"> 打开 APP</button>
      <button open-type="feedback">意见反馈</button>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'button 按钮',
      loading: false
    }
  },
  methods: {
    toggleLoading() {
      this.loading = !this.loading
    },
    goto() {
      uni.showToast({ title: 'warn 被点了一下', icon: 'none' })
    },
    launchAppError(e) {
      uni.showModal({ content: '打开 APP 失败：' + e.detail.errMsg, showCancel: false })
    }
  }
}
</script>

<style>
/* 统一间距 */
.uni-padding-wrap {
  padding: 30rpx;
}
.uni-common-mt {
  margin-top: 30rpx;
}
.button-sp-area {
  margin: 40rpx 0;
}
.mini-area {
  display: flex;
  justify-content: space-around;
  margin: 40rpx 0;
}
.mini-btn {
  width: 90rpx;
  padding: 0;
}
/* 镂空按钮上下间距 */
button[plain] {
  margin-bottom: 20rpx;
}
</style>